<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爬虫</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/fontello-embedded.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
	</head>
	<body>
		<header class="animated fadeInDown clearfix" >
			<div class="header-item">
				<img src="images/logo2.png" alt="prime-research" />
			</div>
			<div class="header-item">爬虫管理系统</div>
			<div class="header-item">
				欢迎你，外国人小姐
				<a href="">安全退出</a>
			</div>
			
		</header>
		<section>
			<div class="main">
				<div class="left animated fadeInLeft">
					<ul>
						<li>
							<div class="li-item normal">
								<a href="#">任务管理</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide" >
								<a href="taskMange.html">任务进程管理</a>
								<a href="#">任务优先级管理</a>
								<a href="#">调度时间管理</a>
								<a href="createExport.html">创建导出任务</a>
								<a href="exportList.html">导出列表</a>
							</div>
							
						</li>
						<li>
							<div class="li-item normal" >
								<a href="#">站点列表</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">站点配置</a>
								<a href="#">板块配置</a>
								<a href="#">规则配置</a>
								<a href="#">不同类型网站规则</a>
							</div>
						</li>
						<li>
							<div class="li-item normal" >
								<a href="#">数据展现</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">站点数据</a>
								<a href="#">自定义频道</a>
							</div>
						</li>
						<li>
							<div class="li-item normal" >
								<a href="#">任务调度</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">待抓取任务</a>
								<a href="#">Redis</a>
								<a href="#">源码抓取</a>
							</div>
						</li>
					</ul>
				</div><!--left end-->
				<div class="right">
					<div class="right-content"><!--right-content 也是共有部分-->
						
						<div class="task-box">
							<table border="1">
								<tr>
									<td>任务名称</td>
									<td >
										<input class="input-default" type="text" name="" id="" value="" placeholder="请输入任务名称"/>
									</td>
								</tr>
								<tr>
									<td>网站</td>
									<td >
										<input class="input-default" type="text" name="" id="" value="" placeholder="请输入网站"/>
									</td>
								</tr>
								<tr>
									<td>板块</td>
									<td>
										<input class="input-default" type="text" name="" id="" value="" placeholder="请输入板块"/>
									</td>
								</tr>
								<tr>
									<td>开始日期</td>
									<td>
										<input class="input-default" type="text" name="" id="startTime" value="" placeholder="开始日期"/>
									</td>
									
								</tr>
								<tr>
									<td>结束日期</td>
									<td>
										<input class="input-default" type="text" name="" id="endTime" value="" placeholder="结束日期"/>
									</td>
									
								</tr>
								
							</table>
							
							<div class="buttons">
								<button class="btn-default submit-btn">提交</button>
							    <button class="btn-default cal-btn">取消</button>
							</div>
							
							
						</div>
						
						
						
					</div><!--right-content end-->
					
				</div><!--right end-->
			</div>
		</section>
		
		
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
		   //导航栏的显示与隐藏
			$(".left ul li .li-item").each(function(){
				this.onclick = function(){
					$(this).siblings().animate({height:'toggle'});
					$(this).parent().siblings().children(".second-element").hide();//同辈元素隐藏
					
					//选中样式  移除样式
					$(this).removeClass("normal").addClass("active");
					$(this).parent().siblings().children(".li-item").removeClass("active").addClass("normal");
					
					
				}
			})
			//二级菜单的选中样式
			$(".second-element a").each(function(){
				this.onclick = function(){
					$(this).addClass("a-active").siblings().removeClass("a-active");
					$(this).parents("li").siblings().children(".second-element").children("a").removeClass("a-active");
				}
			})
			
			//时间
			$("#startTime").datepicker({});
			$("#endTime").datepicker({});
			
			
		</script>
	</body>
</html>
